import { IconFont } from '@nutui/icons-react-taro'
import { Swiper, SwiperItem } from '@nutui/nutui-react-taro'
import { Image, Text, View } from '@tarojs/components'
import React from 'react'
import { useRequest } from 'taro-hooks'
import Card from '../../components/card'
import FeeDetails from '../../components/fee-details'
import Layout from '../../components/layout'
import { QUOTATION_CATEGORIES, THEME_COLORS, TOTAL_QUOTATION_AMOUNT } from '../../constants/index'
import { getProductInfo } from '../../services/product'
import './index.less'

interface PackageImage {
  src: string
  alt: string
}

interface PackageContent {
  icon: React.ReactNode
  title: string
  description: string
}

interface TimelineItem {
  step: string
  title: string
  duration: string
}

const ProductDetails: React.FC = () => {
  const { data, loading } = useRequest(getProductInfo, {
    manual: true,
    defaultParams: ['1'],
  })

  const packageImages: PackageImage[] = [
    {
      src: 'https://images.unsplash.com/photo-1586023492125-27b2c045efd7?w=800&h=600&fit=crop&crop=center',
      alt: '老房大变身效果图1',
    },
    {
      src: 'https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=800&h=600&fit=crop&crop=center',
      alt: '老房大变身效果图2',
    },
    {
      src: 'https://images.unsplash.com/photo-1616486338812-3dadae4b4ace?w=800&h=600&fit=crop&crop=center',
      alt: '老房大变身效果图3',
    },
  ]

  const packageContent: PackageContent[] = [
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='mugong' size={30} />,
      title: '基础工程',
      description: '包含拆除、新建、地面找平等',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='kaiguan' size={30} />,
      title: '水电改造',
      description: '包含电线更换、水管更换、强弱电布线等',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='linyu' size={30} />,
      title: '卫浴翻新',
      description: '包含卫生间、厨房防水、瓷砖铺贴等',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='youqigong' size={30} />,
      title: '墙面处理',
      description: '包含墙面找平、腻子、乳胶漆等',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='diban' size={30} />,
      title: '地面装修',
      description: '包含地板、瓷砖、地毯等地面材料',
    },
    {
      icon: <IconFont fontClassName='iconfont' classPrefix='icon' name='dengju' size={30} />,
      title: '照明系统',
      description: '包含灯具安装、开关插座等',
    },
  ]

  const timelineData: TimelineItem[] = [
    { step: '1', title: '现场勘测', duration: '1天' },
    { step: '2', title: '设计方案', duration: '3-5天' },
    { step: '3', title: '材料进场', duration: '1天' },
    { step: '4', title: '基础施工', duration: '5-7天' },
    { step: '5', title: '装修施工', duration: '15-20天' },
    { step: '6', title: '验收交付', duration: '1天' },
  ]

  return (
    <Layout title='产品详情' showTabBar={false} loading={loading}>
      <View className='product-details'>
        {/* 产品图片轮播 */}
        <Card rounded='none' className='image-carousel-card'>
          <View className='image-carousel'>
            <Swiper className='nut-swiper' autoPlay loop height='256px'>
              {packageImages.map((image, index) => (
                <SwiperItem key={index}>
                  <Image src={image.src} className='carousel-image' mode='aspectFill' />
                </SwiperItem>
              ))}
            </Swiper>
          </View>
        </Card>

        {/* 产品信息 */}
        <Card padding='md' rounded='none' className='product-info-card'>
          <View className='product-info'>
            <Text className='product-title'>{data?.product?.product_name}</Text>
            <Text className='product-description'>{data?.product?.product_description}</Text>
            <View className='price-section'>
              <Text className='current-price'>{data?.product?.default_package?.package_name}</Text>
              <Text className='original-price'>¥128,800</Text>
              <Text className='discount-tag'>限时优惠</Text>
            </View>
          </View>
        </Card>
        {/* 套餐内容 */}
        <Card padding='md' rounded='none' className='content-card'>
          <View className='content-section'>
            <Text className='section-title'>套餐内容</Text>
            <View className='content-list'>
              {packageContent.map((item, index) => (
                <View key={index} className='content-item'>
                  <View className='item-icon' style={{ backgroundColor: `${THEME_COLORS.primary}20` }}>
                    <Text className='material-symbols-outlined' style={{ color: THEME_COLORS.primary }}>
                      {item.icon}
                    </Text>
                  </View>
                  <View className='item-content'>
                    <Text className='item-title'>{item.title}</Text>
                    <Text className='item-description'>{item.description}</Text>
                  </View>
                </View>
              ))}
            </View>
          </View>
        </Card>
        {/* 工期预计 */}
        <Card padding='md' rounded='none' className='timeline-card'>
          <View className='content-section'>
            <Text className='section-title'>工期预计</Text>
            <View className='timeline-list'>
              {timelineData.map((item, index) => (
                <View key={index} className='timeline-item'>
                  <View className='step-number' style={{ backgroundColor: THEME_COLORS.primary }}>
                    <Text>{item.step}</Text>
                  </View>
                  <View className='step-content'>
                    <Text className='step-title'>{item.title}</Text>
                    <Text className='step-duration'>预计 {item.duration}</Text>
                  </View>
                </View>
              ))}
            </View>
          </View>
        </Card>
        {/* 费用明细 */}
        <FeeDetails
          categories={QUOTATION_CATEGORIES}
          totalAmount={TOTAL_QUOTATION_AMOUNT}
          primaryColor={THEME_COLORS.primary}
        />
      </View>
    </Layout>
  )
}

export default ProductDetails
